<template>
    <div style="background-color: #f5f5f5;padding: 10px;display: flex;justify-content: center;align-items: center;">
      <a-card title="词库创建" class="card" style="width: 400px;margin: 10px" >
            <van-form @submit="createWord">
                <van-cell style="margin-top: 16px;">
                  <van-field v-model="state.formData.wordname" name="词库名" label="词库名" placeholder="词库名" :rules="[{ required: true, message: '请填写词库名' }]"/>
                  </van-cell>
                  <van-cell style="margin-top: 16px;">
                  <van-field v-model="state.formData.worddscript" name="词库描述" label="词库描述" placeholder="词库描述" :rules="[{ required: true, message: '请填写词库描述' }]"/>
                </van-cell>
                <van-cell style="margin-top: 16px;">
                  <van-field v-model="state.formData.wordcontent" name="词库内容" label="词库内容" placeholder="词库内容" :rules="[{ required: true, message: '请填写词库内容' }]"/>
                </van-cell>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">创建词库</van-button>
                <van-button round block type="primary" @click="Word" style="margin-top: 16px;">词库选择</van-button>
            </div>
            </van-form>
          </a-card>
    </div>
  </template>
    <script>
    import {  defineComponent,reactive } from 'vue';
    import { useRouter } from 'vue-router';
    import axios from 'axios';
    import url from '@/main';
    import {message}from 'ant-design-vue'
    export default defineComponent({
      name: 'App',
      components: {
      },
      setup(){
        const router=useRouter()
        const state = reactive({
          formData:{
            wordname: '',
            worddscript: '',
            wordcontent:'',
            wordowner:''
          },
        });
        const createWord = ()=>{
          state.formData.wordowner = localStorage.getItem('username')
          //axios.post('http://47.101.35.155:3000/createWord', state.formData)
          axios.post('http://'+url+':3000/createWord', state.formData)
            .then(function (response) {
            message.info(response.data.message)
        })
          router.push('/roomCreate')
        };
        const Word = ()=>{
          router.push('/WordSelect')
        }
        return{
          state,
          createWord,
          router,
          Word
        }
      }
    })
    </script>